<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 2px dotted blue;
        }
    </style>
</head>

<body>
    <button>获取经纬度</button>
    <div class="box"></div>
    <script>
        //注意： 想要 获取用户的地理位置 ，需要 用户允许
        //1.获取dom
        var oBtn = document.querySelector('button');
        var oBox = document.querySelector('.box');
        //2.绑定点击事件
        oBtn.onclick = function () {
            console.log("开始地理位置获取了！");
            //获取 地理位置
            //3个参数，
            /* 
            1.回调函数 获取地理位置成功后执行的回调函数
            2.回调函数 获取地理位置失败后执行的回调函数
            3.json对象 获取地理位置的属性的设置
            */
            navigator.geolocation.getCurrentPosition((position) => {//成功
                console.log(position);
                var jingdu = position.coords.longitude;
                var weidu = position.coords.latitude;
                //将经纬度添加到 box
                oBox.innerHTML = `经度：${jingdu},纬度：${weidu}`;
            }, (error) => {//失败
                console.log(error);
                if (error.code == 3) {
                    oBox.innerHTML = '地理位置定位超时';
                } else if (error.code == 1) {
                    oBox.innerHTML = '用户拒绝地理位置定位';
                } else {
                    oBox.innerHTML = '其他报错信息';
                }
                /*
                code: 3
                message: "Timeout expired"
                */
            }, {//配置
                timeout: 2000,//获取经纬度的过期时间，在2秒内没有获取到经纬度就会报错
                enableHighAccuracy: true,//高精度
                maximumAge: 3000//浏览器重新获取 地理位置的时长
            });
        }
    </script>
</body>

</html>